$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$width: 82.292vw;
$f: 19.2;
*,
*::after,
*::before {
  box-sizing: border-box;
}
.home {
  position: relative;
  width: 100%;

  .banner {
    position: relative;
    padding-top: 3vw;
    .bg {
      overflow: hidden;

      img {
        width: 100%;
        transform: scale(1.1);
        transition: all 600ms;
        object-fit: cover;
      }
    }

    .text {
      width: $width;
      left: calc((100% - 82.292vw) / 2);
      position: absolute;
      top: 60%;
      transform: translateY(-50%);

      .t {
        color: #FFF;
        font-size: $fontSize_90;
        font-weight: 600;
      }

      .t2 {
        color: #E11B00;
        font-size: $fontSize_24;
        font-weight: 500;
      }
      .t3{
        color: #FFF;
        font-size: $fontSize_22;
        font-style: normal;
        font-weight: 400;
        margin: 1.302083333333333vw 0 0 0;
      }
    }

    &:hover {
      .bg {
        img {
          transform: scale(1);
        }
      }
    }
  }

  .section1 {
    .wrap {
      width: 82.292vw;
      margin: 120/$f+vw auto;

      .matter {
        display: flex;

        .images {
          width: 50%;
          position: relative;
          overflow: hidden;
          .position_img {
            position: absolute;
            width: 78/$f+vw;
            height: 78/$f+vw;
            right: 0;
            bottom: 0;
          }

          .img {
            width: 100%;
            height: 100%;
            transition: all 600ms;
          }
          &:hover{
            .img{
              transform: scale(1.05);
            }
          }
        }

        .text {
          width: 50%;
          background: #F7F7F7;
          display: flex;
          align-items: center;
          padding: 0 0 0 77/$f+vw;

          h1 {
            color: #000;
            font-size: 30/$f+vw;
            font-weight: 600;
            line-height: 34/$f+vw; /* 113.333% */
            margin: 0 0 50/$f+vw;
          }

          p {
            color: #666;
            font-size: 1.1vw;
            font-weight: 300;
            line-height: 1.6; /* 172.727% */
          }
        }

        &:nth-child(2n) {
          flex-direction: row-reverse;

          .text {
            padding: 0 79/$f+vw 0 0;
            justify-content: flex-end;
            text-align: right;
          }
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .banner{
      padding-top: 0;
      .bg{
        img{
          min-height: 200px;
        }
      }
      .text{
        top: 49%;
        .t{
          font-size: 24px;
        }
        .t2{
          font-size: 18px;
        }
        .t3{
          font-size: 11px;
          margin: 10px 0 0 0;
        }
      }
    }

    .section1{
      .wrap{
        width: 90%;
        margin: 30px auto 78px;
        .matter{
          flex-direction: column!important;
          &:not(:last-child) {
            margin: 0 0 18px;
          }
          .images{
            width: 100%;
          }
          .text{
            width: 100%;
            height: auto;
            padding: 5% !important;
            margin: 0!important;
            text-align: left!important;
            justify-content: unset!important;
            h1{
              font-size: 24px;
              line-height: 1;
              margin: 0 0 15px;
            }
            p{
              font-size: 16px;
              line-height: 1.6;
              br{
                display: none;
              }
            }
          }
        }
      }
    }
  }
}